<template>
  <div>
    <div>
      <a href="#" @click="tz">康复治疗添加</a>
      <a href="#" @click="sp">食谱显示</a>
      项目名称<input type="text" v-model="p.name" />
      <input type="button" value="查询" @click="show()" />
      <table class="table" border="1">
        <thead>
          <tr>
            <td><input type="checkbox"></td>
            <td>项目名称</td>
            <td>佣金</td>
            <td>服务人数</td>
            <td>服务时长</td>
            <td>项目说明</td>
            <td>状态</td>
            <td>编辑</td>
          </tr>
        </thead>
        <tbody v-for="item in info">
          <tr>
            <td><input type="checkbox"></td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.num }}</td>
            <td>{{ item.sc }}</td>
            <td>{{ item.bz }}</td>
            <td>{{ item.stear?"启用":"禁用" }}</td>
            <td><a href="#" @click="del(item.id)">删除</a><a href="#" @click="upd(item.id)">修改</a></td>
          </tr>
        </tbody>
      </table>
      <span
        >共有{{ p.count }}条数据，一共有{{ p.pcount }}页，当前第{{
          p.index
        }}页，当前页{{ p.size }}条</span
      >
        <select @change="ym" v-model="p.ys">
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
        </select>

      <a href="#" @click="page('a')">首页</a>
      <a href="#" @click="page('b')">上一页</a>
      <a href="#" @click="page('c')">下一页</a>
      <a href="#" @click="page('d')">尾页</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();
const del = (id: number) => {
  if (confirm("确认删除吗?")) {
    axios
      .delete("https://localhost:7041/api/kfzl/delkfzl?id=" + id)
      .then((res) => {
        if (res.data > 0) {
          alert("删除成功");
          show()
        } else {
          alert("删除失败");
        }
      });
  }
};
const sp=()=>{
    router.push('spshow');
}
const ym=()=>{
    p.value.size=p.value.ys;
    show();
}

const upd = (id: number) => {
    axios
      .put("https://localhost:7041/api/kfzl/updkfzl?id=" + id)
      .then((res) => {
        if (res.data > 0) {
          alert("修改成功");
          show()
        } else {
          alert("修改失败");
        }
      });
};

const info = ref([
  {
    id: 0,
    name: "",
    price: 0,
    num: 0,
    sc: 0,
    stear: true,
    bz: "",
    lj: 0,
    date: "",
  },
]);
const tz = () => {
  router.push("kfadd");
};

const page = (v: string) => {
  if (v == "a") {
    p.value.index = 1;
  }
  if (v == "b") {
    if (p.value.index > 1) {
      p.value.index -= 1;
    }
  }
  if (v == "c") {
    if (p.value.index <p.value.pcount) {
      p.value.index += 1;
    }
  }
  if (v == "d") {
    p.value.index = p.value.pcount;
  }
  show();
};

onMounted(() => {
  show();
});
const p = ref({
  index: 1,
  size: 2,
  count: 0,
  pcount: 0,
  name: "",
  type: "",
  ys:2
});

const show = () => {
  axios
    .get("https://localhost:7041/api/kfzl/getkfzl", { params: p.value })
    .then((res) => {
      info.value = res.data.data;

      p.value.count = res.data.count;
      p.value.pcount = Math.ceil(p.value.count / p.value.size);
    });
};
</script>
